<template>
<div id="eventManager">
  <v-header title="开发者账户" :showDownloadBtn = "download" :saveShow = "save"></v-header>
  <div class="container_wrap">
  <el-container class="container-box">
    <el-header class="header-tool-bar">
      <!-- 按钮 -->
      <el-row>
        <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
      </el-row>
    </el-header>
    <el-main class="main-table-box">
      <!-- 表单 -->
      <el-table
        ref="table"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          prop="devName"
          label="开发者名称"
          width="auto">
        </el-table-column>
        <el-table-column
          label="开发者类型"
          width="auto">
          <template slot-scope="scope">
            {{devTypesDict[scope.row.devType]}}
          </template>
        </el-table-column>
        <el-table-column
          prop="devBranch"
          label="归属机构"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="devAcct"
          label="开发者账号"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="linkName"
          label="联系人"
          width="auto">
        </el-table-column>
        <el-table-column
          label="当前状态"
          width="auto">
          <template slot-scope="scope">
            {{devStatusDict[scope.row.devStatus]}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small"  @click="toReOpen(scope.row)">解冻</el-button>
                <el-button type="text" size="small"  @click="toClose(scope.row)">冻结</el-button>
                 <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="totalCount"
          style="padding:20px 5px">
        </el-pagination>
    </el-main>
  </el-container>
  </div>
  <!-- 新增/编辑-弹窗 -->
    <el-dialog :title="addRoleDialogMode === 'ADD' ? '新增开发者账户' : '编辑设置'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               @close="cancel"
               width="900px"
               >
      <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <div>账户信息</div>
        <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="开发者名称" prop="devName">
          <el-input v-model="ruleForm.devName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属机构" prop="devBranch">
          <el-input v-model="ruleForm.devBranch"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="开发者类型" prop="devType">
            <el-select v-model="ruleForm.devType" popper-class="zIndex-popper" placeholder="请选择" style="width:268px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="linkName">
            <el-input v-model="ruleForm.linkName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" v-if="isshowdata">
            <el-form-item label="联系人手机号" prop="linkMobile">
            <el-input v-model="ruleForm.linkMobile" :disabled="editsysid"></el-input>
            </el-form-item>
          </el-col>
        <el-col :span="12" v-if="isshowdata">
           <el-form-item label="开发者账号" prop="devAcct">
           <el-input v-model="ruleForm.devAcct"></el-input>
           </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" v-if="isshowdata">
            <el-form-item label="联系人电话" prop="linkTelephone">
            <el-input v-model="ruleForm.linkTelephone" :disabled="editsysid" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isshowdata">
            <el-form-item label="联系人邮箱" prop="linkEmail">
            <el-input v-model="ruleForm.linkEmail"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div>
        <div v-if="isshowdata">企业信息</div>
        <el-row :gutter="24" v-if="isshowdata">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="ent_name">
            <el-input v-model="ruleForm.ent_name" :disabled="editsysid" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业证件号" prop="id_no">
            <el-input v-model="ruleForm.id_no" :disabled="editsysid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="isshowdata">
          <el-col :span="12">
            <el-form-item label="企业法人名称" prop="legal_name">
            <el-input v-model="ruleForm.legal_name"  ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业法人证件号码" prop="legal_id_no">
            <el-input v-model="ruleForm.legal_id_no"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </div>
        <el-form-item class="dialogbtn">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="cancel('ruleForm')">关闭</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>

<script>
  import { gateWay } from '../../dict/rule-dict'
  import '../../../../assets/css/mixinParameterManager.styl'
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'
  import {mobileNumberValidator, emailValidator, telNumberValidator} from '../../../../assets/js/rules'
export default{
  name: 'system-list',
  components: {
    VHeader
  },
  data () {
      return {
      // 获取开发者状态
        options: [{
          value: '00',
          label: '申请待审核'
        }, {
          value: '01',
          label: '审核通过-正常'
        },
        {
          value: '02',
          label: '审核未通过'
        },
        {
          value: '03',
          label: '关闭'
        }
        ],
        // 获取开发者类型
        dataTypes: [{
          value: '00',
          label: '内部开发者账户'
        }, {
          value: '01',
          label: '合作机构账户'
        },
        {
          value: '02',
          label: '开放企业账户'
        },
        {
          value: '03',
          label: '关闭'
        }
        ],
        tableLoading: true,
        condition: '', // 输入条件
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        totalCount: 0, // 默认数据总数
        editmetaid: false, // meta_id input框禁止修改
        editsysid: false, // event_id input框禁止修改
        checked: false,
        varlist: '',
        tableData: [],
        checkbox: [],
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        list: [],
        download: false,
        save: false,
        isshowdata: true,
        devPasswd: '',
        applyTime: '',
        closeTime: '',
        devId: '',
        devStatus: '',
        lastedTime: '',
        openTime: '',
        ruleForm: {
          devName: '',
          devBranch: '',
          devType: '',
          devAcct: '',
          linkName: '',
          linkMobile: '',
          linkTelephone: '',
          linkEmail: '',
          ent_name: '',
          id_no: '',
          legal_name: '',
          legal_id_no: '',
          val: '',
          applyTime: '',
          closeTime: '',
          devId: '',
          devStatus: '',
          lastedTime: '',
          openTime: ''
        },
        rules: {
          devName: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入18个字符', trigger: 'blur' }
          ],
          devType: [
            { required: true, message: '请输入', trigger: 'change' },
            { max: 20, message: '最多输入30个字符', trigger: 'change' }
          ],
          devBranch: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          devAcct: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          linkName: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          linkMobile: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' },
            { validator: mobileNumberValidator, trigger: 'blur' }
          ],
          linkTelephone: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' },
            { validator: telNumberValidator, trigger: 'blur' }
            ],
          linkEmail: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' },
            { validator: emailValidator, trigger: 'blur' }
          ],
          ent_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          id_no: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          legal_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          legal_id_no: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ]
        },
        currentItem: {}
      }
    },
    created () {
      this.queryForPage()
    },
    methods: {
      queryForPage (pageNum = 1, pageSize = 10) {
        ajax.post(api.SELECT_LIST_DEV_APP + '?pageNum=' + pageNum + '&pageSize=' + pageSize, {}).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.list
          this.totalCount = res.total
        })
      },
      // 当前页数
      handleCurrentChange (val) {
        this.queryForPage(val)
        this.varlist = val
      },
      // 增加按钮
      adddialogForm () {
        this.ruleForm = {}
        this.currentItem = {}
        this.$refs.table.clearSelection() // 点击新增清除选中状态
        this.addRoleDialogVisiable = true
        this.addRoleDialogMode = 'ADD'
        this.editmetaid = false
        this.editsysid = false
        this.isshowdata = true
      },
      // 关闭
      cancel (formName) {
        this.$refs.ruleForm.resetFields() // 移除校验 重置为初始状态
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.ruleForm = this.currentItem
      },
         // 重置
      resetForm () {
    this.ruleForm = {...this.currentItem}
    this.$refs.ruleForm.clearValidate()
      },
      // 编辑
      handleEdit (row) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editmetaid = true // devName input框禁止修改
            this.editsysid = true // devBranch input框禁止修改
            this.isshowdata = false // 隐藏不编辑的内容
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            this.currentItem = JSON.parse(JSON.stringify(row))
            this.ruleForm = JSON.parse(JSON.stringify(row))
      },
      // 冻结
      toClose (row) {
            const toClosedata = {
              devId: row.devId,
              devStatus: row.devStatus
        }
        ajax.post(api.CLOSE_DEV_ACCT, toClosedata, true).then((res) => {
          if (res === 'success') {
            this.$message({
              type: 'success',
              message: '冻结成功'
            })
            this.queryForPage()
          }
        }).catch((err) => {
          if (err.errorMsg) {
            this.$message.error(err.errorMsg)
          }
        })
      },
      // 解冻
      toReOpen (row) {
              const toReOpendata = {
              devId: row.devId,
              devStatus: row.devStatus
        }
        ajax.post(api.REOPEN_DEV_ACCT, toReOpendata, true).then((res) => {
          if (res === 'success') {
            this.$message({
              type: 'success',
              message: '解冻成功'
            })
            this.queryForPage()
          }
        }).catch((err) => {
          if (err.errorMsg) {
            this.$message.error(err.errorMsg)
          }
        })
      },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const insertdata = {
              devName: this.ruleForm.devName,
              devBranch: this.ruleForm.devBranch,
              devType: this.ruleForm.devType,
              devAcct: this.ruleForm.devAcct,
              linkName: this.ruleForm.linkName,
              linkMobile: this.ruleForm.linkMobile,
              linkTelephone: this.ruleForm.linkTelephone,
              linkEmail: this.ruleForm.linkEmail,
              ent_name: this.ruleForm.ent_name,
              id_no: this.ruleForm.id_no,
              legal_name: this.ruleForm.legal_name,
              legal_id_no: this.ruleForm.legal_id_no,
              devPasswd: this.devPasswd
            }
            const updata = JSON.parse(JSON.stringify(this.ruleForm))
            updata.ent_name = this.ruleForm.ent_name
            updata.id_no = this.ruleForm.id_no
            updata.legal_name = this.ruleForm.legal_name
            updata.legal_id_no = this.ruleForm.legal_id_no
            if (this.addRoleDialogMode === 'ADD') {
              // 新增接口
              ajax.post(api.INSERT_LIST_DEV_ACCT, insertdata).then((res) => {
                  this.queryForPage()
                  this.$message({
                  type: 'success',
                  message: '添加成功!'
              })
                })
            } else if (this.addRoleDialogMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_LIST_DEV_APP, updata).then((res) => {
                this.ruleForm = {}
                this.handleCurrentChange(this.varlist ? this.varlist : 1)
                this.varlist = ''
                  this.$message({
                  type: 'success',
                  message: '编辑成功!'
            })
              })
            }
            this.addRoleDialogVisiable = false
        } else {
          return false
        }
      })
    }
  },
  computed: {
    devTypesDict () {
      return gateWay.devTypes
    },
    devStatusDict () {
      return gateWay.devStatus
    }
  }
}
</script>
